<template>
  <div class="count-comp">
    <button @click="subCountHandler">-</button>
    <span class="count-number">{{ num }}</span>
    <button @click="addCountHandler">+</button>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';
  // import bus from '@/utils/EventBus'

  @Component({name: 'Count'})
  export default class Header extends Vue{
      /* props */
      @Prop({default: 0}) private num!: number;

      /* 在Goods组件中使用当前组件， 与App组件的数据传参
      @Prop() private id!: number;
      addCountHandler(): void {
        bus.$emit('numChangeEvent', {id: this.id, val: this.num+1});
      }
      subCountHandler(): void {
        bus.$emit('numChangeEvent', {id: this.id, val: this.num-1});
      }
      */
      addCountHandler(): void {
          this.$emit('numChangeEvent', this.num+1);
      }
      subCountHandler(): void {
          this.$emit('numChangeEvent', this.num-1);
      }
  };
</script>

<style scoped lang="less">
  .count-number {
    display: inline-block;
    width: 30px;
    height: 15px;
  }
</style>
